<script lang="ts" setup>
import { ref } from 'vue';

const list = ref<any>([{
  createdAt: '2023-01-01 20:11:33',
  photo: '13800138000',
  teamName: "刘艺成的团",
  teamIdentity: "团长",
  teamMemberCount: 11,
  applicant: {
    realName: "刘艺成",
    phone: "13512345678"
  },
  nickName: "梁春飞",
  paymentAmount: '50元',
  receivedAmount: '49.65元',
  teamStatus: '待成团',
  orderStatus: '待核销'
}, {
  createdAt: '2023-01-01 20:11:33',
  photo: '13800138000',
  teamName: "刘艺成的团",
  teamIdentity: "团员",
  teamMemberCount: 11,
  applicant: {
    realName: "刘二妹",
    phone: "13512345678"
  },
  nickName: "梁春飞",
  paymentAmount: '50元',
  receivedAmount: '49.65元',
  teamStatus: '已成团',
  orderStatus: '已核销'
}, {
  createdAt: '2023-01-01 20:11:33',
  photo: '13800138000',
  teamName: "肖云珊的团",
  teamIdentity: "团长",
  teamMemberCount: 11,
  applicant: {
    realName: "肖云珊",
    phone: "15912345678"
  },
  nickName: "双木",
  paymentAmount: '50元',
  receivedAmount: '49.65元',
  teamStatus: '已成团',
  orderStatus: '已核销'
}])

const teamList = ref<any>([
  {
    count: 5
  },
  {
    count: 5
  }
])

const transferModalVisible = ref(false)
</script>
<template>
  <umrp-container direction="vertical" :gap="16" height="100%" bg-color="#f2f2f2" padding="16px">
    <umrp-breadcrumb :items="['活动管理', '活动列表', '报名表']"></umrp-breadcrumb>
    <umrp-card>
      <umrp-grid :cols="4" :row-gap="10" :col-gap="10">
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>已报名人数</div>
                <umrp-tooltip content="已经报名并支付成功的人数总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>总支付金额</div>
                <umrp-tooltip content="当前活动报名支付金额的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>退款人数</div>
                <umrp-tooltip content="当前活动退款人数的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>退款金额(元)</div>
                <umrp-tooltip content="当前活动退款金额的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>实收金额(元)</div>
                <umrp-tooltip content="当前活动总收款扣除佣金后的剩余总额">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>开团数</div>
                <umrp-tooltip content="用户选择开团且报名支付成功的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="999">
            <template #extra>
              <umrp-space align="center" :size="4">
                <div>成团数</div>
                <umrp-tooltip content="当前活动中达成最低成团人数的总和">
                  <umrp-icon name="help" :size="16" color="#333"></umrp-icon>
                </umrp-tooltip>
              </umrp-space>
            </template>
          </umrp-statistic>
        </umrp-grid-item>
      </umrp-grid>
    </umrp-card>
    <umrp-card>
      <umrp-table :data="list">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="微信资料" slot-name="wxinfo"></umrp-table-column>
          <umrp-table-column title="报名信息" slot-name="applicant"></umrp-table-column>
          <umrp-table-column title="邀请人" slot-name="invitedBy"></umrp-table-column>
          <umrp-table-column title="团内身份" data-index="teamIdentity"></umrp-table-column>
          <umrp-table-column title="团人数" data-index="teamMemberCount"></umrp-table-column>
          <umrp-table-column title="所属团" data-index="teamName"></umrp-table-column>
          <umrp-table-column title="支付金额" data-index="paymentAmount"></umrp-table-column>
          <umrp-table-column title="实收金额" data-index="receivedAmount"></umrp-table-column>
          <umrp-table-column title="报名时间" data-index="createdAt"></umrp-table-column>
          <umrp-table-column title="待成团" data-index="teamStatus"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
        </template>
        <template #invitedBy>
          <umrp-space direction="vertical" :size="6">
            <umrp-text>高州百悦艺术张老师</umrp-text>
            <umrp-text>13512345678</umrp-text>
            <umrp-text>ID:125709154</umrp-text>
          </umrp-space>
        </template>
        <template #applicant="{ record }">
          <umrp-space direction="vertical" :size="10">
            <umrp-text>{{ record.applicant.realName }}</umrp-text>
            <umrp-text>{{ record.applicant.phone }}</umrp-text>
          </umrp-space>
        </template>
        <template #action="{ record }">
          <umrp-space :size="10">
            <umrp-button type="primary">开团</umrp-button>
            <umrp-button type="primary" @click="transferModalVisible = true">转团</umrp-button>
            <umrp-button type="primary" v-if="record.teamIdentity === '团长'">降为团员</umrp-button>
            <umrp-button type="primary" v-else>升为团长</umrp-button>
          </umrp-space>
        </template>
        <template #wxinfo="{ nickName, userId }">
          <umrp-user-info :nick-name="nickName" :user-id="userId">
          </umrp-user-info>
        </template>
      </umrp-table>
    </umrp-card>
    <umrp-modal :visible="transferModalVisible" :width="500" :footer="false">
      <umrp-container direction="vertical" :gap="10">
        <umrp-input-search></umrp-input-search>
        <umrp-table :data="teamList">
          <template #columns>
            <umrp-table-column title="团长" slot-name="teamer"></umrp-table-column>
            <umrp-table-column title="团人数" data-index="count" width="100"></umrp-table-column>
            <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
          </template>
          <template #teamer="{ record }">
            <umrp-user-info :nick-name="record.nickName" :user-id="record.userId">
            </umrp-user-info>
          </template>
          <template #action>
            <umrp-space :size="10">
              <umrp-button type="primary" @click="transferModalVisible = false">选择</umrp-button>
            </umrp-space>
          </template>
        </umrp-table>
      </umrp-container>
    </umrp-modal>
  </umrp-container>
</template>